<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            var pageNo = 1;
            var pageTotal = 1;
            var sname;
            var qq;
            var telephone;
            var enterDateStart;
            var enterDateEnd;


            function doLoad() {
                $.get("student/pageAjax", {
                    pageNo: pageNo,
                    sname: sname,
                    qq: qq,
                    telephone: telephone,
                    enterDateStart: enterDateStart,
                    enterDateEnd: enterDateEnd
                }, function (p) {
                    var tab = $("#query-table");
                    tab.find("tr:gt(0)").remove();
                    pageTotal = p.pageNumber;
                    $.each(p.data, function (i, d) {
                        tab.append("<tr><td>" + d.stuno + "</td><td>" + d.sname + "</td><td>" + d.sex + "</td><td>" + d.telephone + "</td><td>" + d.qq + "</td><td>" + d.wechat + "</td><td>" + d.gradeid + "</td><td>" + d.enterdate + "</td><td>" + d.fromcity + "</td><td>" + d.birthday + "</td><td>" + d.address + "</td><td>" + d.pass + "</td><td>" + d.idcardpic + "</td><td><a href='#'>详情</a>&nbsp;<a href='#' class='toupdate' data-stuno='"+d.stuno+"' >修改</a>&nbsp;<a href='#' class='del' data-stuno='"+ d.stuno+"' >删除</a></td></tr>");
                    });


                    if (pageNo === 1) {

                        $("#page #prev").hide();

                    } else {
                        $("#page #prev").show();
                    }


                    if (pageNo === pageTotal) {

                        $("#page #next").hide();

                    } else {
                        $("#page #next").show();
                    }
                });
            }

            doLoad();
            $("#query-table").on("click",'a.toupdate',function () {
                let stuno=$(this).attr("data-stuno");
                alert(stuno);
                //跳转到另一个html，显示。。。
                window.sessionStorage.setItem("stuno",stuno);
                location='updateStudent.html';
                //location='updateStudent.html?stuno='+stuno;
                //location.search    ?stuno=34
                return false;
            });
            $("#query-table").on("click","a.del",function () {
                alert($(this).html());
                var _this=$(this);
                var stuno=$(this).attr("data-stuno");
                console.log(stuno);
                //confirm
                $.get("student/delete/"+stuno,function (result) {
                    result=JSON.parse(result);
                    if(result.success){
                        alert("删除成功");
                        _this.parents("tr").remove();
                    }else{
                        alert(result.msg);
                    }
                });
                return false;
            });
            $("#page #prev").click(function () {
                pageNo--;
                doLoad();


                return false;
            });
            $("#page #first").click(function () {
                pageNo = 1;
                doLoad();


                return false;
            });
            $("#page #last").click(function () {
                pageNo = pageTotal;
                doLoad();
                return false;
            });
            $("#page #next").click(function () {
                pageNo++;
                doLoad();

                return false;
            });
            $("#page #go").click(function () {
                var num = $("#number").val();
                if (num <= 1) {
                    pageNo = 1;
                }
                else if (num >= pageTotal) {
                    pageNo = pageTotal;
                } else {
                    pageNo = num;
                }
                doLoad();
            });
            $("#search").click(function () {

                pageNo=1;
                sname = $("#searchForm [name=sname]").val();
                qq = $("#searchForm [name=qq]").val();
                telephone = $("#searchForm [name=telephone]").val();
                enterDateStart = $("#searchForm [name=enterDateStart]").val();
                enterDateEnd = $("#searchForm [name=enterDateEnd]").val();


                doLoad();


                return false;


            });


        });
    </script>
</head>
<body>
<div align="center">
    <form id="searchForm">
        <input type="text" name="sname" placeholder="姓名" value=""/>
        <input type="text" name="qq" placeholder="qq号" value=""/>
        <input type="text" name="telephone" placeholder="手机号码" value=""/>
        <input type="date" name="enterDateStart" placeholder="入学起时间" value=""/>
        <input type="date" name="enterDateEnd" placeholder="入学止时间" value=""/>
        <input type="submit" id="search"/>
    </form>
</div>
<table border="1" id="query-table" align="center" cellpadding="0" cellspacing="0">
    <tr bgcolor="#a9a9a9">
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>手机号码</th>
        <th>QQ</th>
        <th>微信</th>
        <th>年级</th>
        <th>入学日期</th>
        <th>起始地</th>
        <th>生日</th>
        <th>住址</th>
        <th>密码</th>
        <th>居民身份证图片</th>
        <th>操作</th>
    </tr>

</table>
<p align="center" id="page">
    <a href="#" id="first">首页</a>

    <a href="#" id="prev">上一页</a>

    <input type="number" min="1" value="" style="width: 60px" id="number">
    <input type="button" value="GO" id="go" style="width: 50px"/>


    <a href="#" id="next">下一页</a>

    <a href="#" id="last"> 尾页</a>
</p>
</body>
</html>